<template>
  <div>
    <el-dialog
      title="查看视频"
      :visible.sync="visible"
      :show="show"
      width="70%"
      :before-close="handleClose"
      @close="$emit('update:show', false)"
    >

      <el-row :gutter="20">
        <el-col :span="18">

          <el-row><el-col>
            <video id="videoElement" style="width:100%" controls />
          </el-col></el-row>
          <el-row>
            <el-radio v-model="radio" :span="3" label="flv" title="播放flv格式"> flv</el-radio>
            <el-input
              v-model="camera.flv"
              :span="9"
              prefix-icon="el-icon-video-camera"
              :readonly="true"
              size="mini"
              style="width:80%"
            />
          </el-row>
          <el-row>
            <el-radio v-model="radio" :span="3" label="hls" disabled title="播放hls格式，延迟较大"> hls </el-radio><el-input v-model="camera.hls" :span="9" prefix-icon="el-icon-video-camera" :readonly="true" size="mini" style="width:80%" />
          </el-row>
          <el-row>
            <el-radio v-model="radio" :span="3" label="rtmp" disabled title="rtmp需要flash支持"> rtmp </el-radio><el-input v-model="camera.rtmp" :span="9" prefix-icon="el-icon-video-camera" :readonly="true" size="mini" style="width:80%" />
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-collapse>
            <el-collapse-item title="控制">
              <el-row>
                <el-col :span="8"><el-button type="info" class="el-icon-top-left" size="mini" @click="control('top-left')" /></el-col>
                <el-col :span="8"><el-button type="info" class="el-icon-top" size="mini" @click="control('top')" /></el-col>
                <el-col :span="8"><el-button type="info" class="el-icon-top-right" size="mini" @click="control('top-right')" /></el-col>
              </el-row>
              <el-row>
                <el-col :span="8"><el-button type="info" class="el-icon-back" size="mini" @click="control('left')" /></el-col>
                <el-col :span="8"><el-button type="info" class="el-icon-full-screen" size="mini" @click="control('no')" /></el-col>
                <el-col :span="8"><el-button type="info" class="el-icon-right" size="mini" @click="control('right')" /></el-col>
              </el-row>
              <el-row>
                <el-col :span="8"><el-button type="info" class="el-icon-bottom-left" size="mini" @click="control('bottom-left')" /></el-col>
                <el-col :span="8"><el-button type="info" class="el-icon-bottom" size="mini" @click="control('bottom')" /></el-col>
                <el-col :span="8"><el-button type="info" class="el-icon-bottom-right" size="mini" @click="control('bottom-right')" /></el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="变焦">
              <el-row>
                <el-col :span="2" />
                <el-col :span="10" align="center">
                  <el-button type="info" class="el-icon-plus" size="mini" @click="zoom(1)" />
                </el-col>
                <el-col :span="10" align="center">
                  <el-button type="info" class="el-icon-minus" size="mini" @click="zoom(0)" />
                </el-col>
                <el-col :span="2" />
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { zoom } from '@/api/channel'
import flvjs from 'flv.js'

export default {
  props: {
    show: Boolean,
    camera: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      radio: 'flv',
      visible: false,
      player: null
    }
  },

  watch: {
    show() {
      this.visible = this.show
      this.$nextTick(() => {
        this.play()
      })
    }
  },
  methods: {
    play() {
      const source = this.camera.flv
      if (flvjs.isSupported()) {
        if (this.player) {
          this.remove()
        }
        const videoElement = document.getElementById('videoElement')
        this.player = flvjs.createPlayer({
          type: 'flv',
          url: source,
          hasAudio: false
        })
        this.player.on('error', () => {
          this.player.play()
        })
        this.player.attachMediaElement(videoElement)
        this.player.load()
        const playPromise = this.player.play()
        if (playPromise !== undefined) {
          playPromise.then(_ => {
            console.log('built')
          }).catch(error => {
            console.error(error)
          })
        }
      } else {
        console.error('不支持flv')
      }
    },
    control() {
      // control(z).then((ret) => {
      //   this.$message(ret.message)
      // })
    },
    zoom(z) {
      zoom(z).then((ret) => {
        this.$message(ret.message)
      })
    },
    remove() {
      if (flvjs.isSupported()) {
        if (this.player) {
          this.player.pause()
          this.player.unload()
          this.player.detachMediaElement()
          this.player.destroy()
          this.player = null
        }
      }
    },
    handleClose(done) {
      this.remove()
      done()
    }
  }
}
</script>

